Улучшить эту документацию Просмотреть исходный код input[range]

Обзор

Нативный элемент ввода диапазона со валидацией и преобразованием.

Модель для элемента ввода диапазона должна всегда быть Number.

IE9 и другие браузеры, не поддерживающие тип range, используют текстовый элемент ввода без каких-либо значений по умолчанию для min, max и step. При этом привязка к модели, валидация и парсинг чисел поддерживаются.

Браузеры, поддерживающие диапазон (последние Chrome, Safari, Firefox, Edge) обрабатывают input[range] таким образом, что элемент ввода никогда не может содержать недопустимое значение. Это означает:

• любое нечисловое значение устанавливается в (max + min) / 2.
• любое числовое значение, меньшее текущего минимального значения или большее текущего максимального значения, устанавливается соответственно на минимальное/максимальное значение.
• дополнительно, текущее step соблюдается, поэтому используется ближайшее значение, удовлетворяющее шагу.

См. Спецификацию HTML по input[type=range] для получения дополнительной информации.

Это имеет следующие последствия для AngularJS:

Поскольку значение элемента всегда должно отражать текущее значение модели, элемент ввода диапазона установит связанное выражение ngModel в значение, установленное браузером для элемента ввода. Например, в следующем элементе ввода <input type="range" ng-model="model.value">, если приложение установит model.value = null, браузер установит значение ввода в '50'. AngularJS затем установит модель в 50, чтобы предотвратить рассогласование между значением ввода и значением модели.

Это означает, что модель для диапазона будет немедленно установлена в 50 после того, как ngModel будет инициализирована. Это также означает, что элемент ввода диапазона никогда не может иметь ошибку required.

Это влияет не только на изменения значения модели, но и на значения атрибутов min, max и step. Когда эти значения изменяются таким образом, что это заставит браузер изменить значение ввода, AngularJS также обновит значение модели.

Автоматическая корректировка значений также означает, что элемент ввода диапазона никогда не может иметь ошибок required, min или max.

Однако step в настоящее время полностью реализован только в Firefox. Другие браузеры имеют проблемы при динамическом изменении шага — они не правильно корректируют значение элемента, а вместо этого могут установить ошибку stepMismatch. В этом случае AngularJS установит ошибку step в элементе ввода и установит модель в undefined.

Обратите внимание, что input[range] несовместим с ngMax, ngMin и ngStep, потому что они не устанавливают атрибуты min и max, что означает, что браузер не будет автоматически корректировать значение ввода на основе их значений и всегда будет предполагать min = 0, max = 100 и step = 1.

<input type="range"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [step="string"]
       [ng-change="expression"]
       [ng-checked="expression"]>